<template >
    <a-drawer
        :title="i18n('taskComm.commDetail','沟通详情')"
        placement="right"
        @close="onCheckCommu"
        width="485"
        class="bpm-commu-history"
        :open="bpmCommuShow"
        :z-index="20000"
    >
        <div>
            <div v-for="item in checkHistorys">
                <div class="description-head">
                    <div class="description-head-portrait"><img
                        src="@/assets/img/portrait.png" /></div>
                    <div class="description-head-user description-head-user-createBy">
                        <div style="flex: 1">
                            <rx-user-info style="font-size: 16px;color: #303030" :userId="item.handlerId"/>
                            <div style="color: #909090;">{{item.createTime}}</div>
                        </div>
                        <div style="margin-top: 10px;display: flex;align-items: center;">
                            <span class="description-head-nodeName"><a-tag color="cyan">{{$i18(item.nodeName,'节点名称')}}</a-tag></span>
                            <span  @click="replyFun(item)" v-if="canReplyFun(item)" class="replyClass"><my-icon type="iconanniu_bianji_20px"></my-icon>{{i18n('taskComm.replyComm','回复沟通')}}</span>
                            <span  @click="withdrawAll(item)" v-if="canWithdraw(item)" class="rx-withdraw"><rx-icon-show icon="icon-lineVue3_revocation"></rx-icon-show>{{i18n('taskComm.withdraw','撤回')}}</span>
                        </div>
                    </div>
                </div>
                <div class="bpm-description-common">
                    <i class="bpm-description-common-triangle"></i>
                    <div class="description-common">
                        <div style="color: #4285F4">{{getReceiverName(item)}}:<span class="bpm-description-common-reply">{{item.opinion}}</span></div>
                    </div>
                    <template v-if="showAttachment(item.attachment)">
                        <div class="description-common-accessory"
                             v-for="(subItem,index) in JSON.parse(item.attachment)">
                            <div class="iconBox description-iconBox" :class="rxClass(subItem)"></div>
                            <div style="flex: 1">
                                <div class="description-common-accessory-con">{{subItem.name}}</div>
                                <div class="description-common-accessory-user">
                                    <div><my-icon type="iconuser-account-bussiness"></my-icon><rx-user-info
                                        :userId="item.createBy"/></div>
                                    <div><my-icon type="icontime"></my-icon>{{ subItem.createTime }}</div>
                                </div>
                            </div>
                            <div class="description-common-download">
                                <my-icon type="iconcloud-download" @click="donwload(subItem)"></my-icon>
                            </div>
                        </div>
                    </template>
                </div>
                <!--回复沟通-->
                <div class="communication" v-for="receiver in item.receivers">
                    <div class="communication-le"><my-icon style="font-size: 23px" type="iconhuifu"></my-icon></div>
                    <div style="flex: 1">
                        <div class="description-head">
                            <div class="description-head-portrait">
                                <img src="@/assets/img/portrait.png"/>
                            </div>
                            <div class="description-head-user">
                                <rx-user-info  style="font-size: 16px;color: #303030" :userId="getReceiverUserId(receiver)"/>
                                <span :class="[receiver.readed==0?'rx-unread':'rx-read']" v-if="receiver.readed !=1">{{getReadedName(receiver)}}</span>
                                <div style="color: #909090;font-size: 12px">{{receiver.createTime}}</div>
                            </div>
                            <div class="rx-withdraw" @click="withdrawOne(item,receiver)" v-if="receiver.readed !=1">
                                <my-icon type="iconchexiao"></my-icon>{{i18n('taskComm.withdraw','撤回')}}
                            </div>
                        </div>
                        <div class="bpm-description-communication" v-if="1==receiver.readed">
                            <i class="bpm-description-common-communication-triangle"></i>
                            <div>{{i18n('taskComm.reply','回复')}}<span style="color:#4285F4;margin-left: 5px">@<rx-user-info :userId="receiver.createBy"/></span>：<span>{{receiver.opinion}}</span></div>
                            <template v-if=" showAttachment(receiver.attachment)">
                                <div class="description-common-accessory"
                                     v-for="(subReceiver,index) in JSON.parse(receiver.attachment)">
                                    <div class="iconBox description-iconBox"
                                         :class="rxClass(subReceiver)"></div>
                                    <div style="flex: 1">
                                        <div
                                            class="description-common-accessory-con">{{subReceiver.name}}</div>
                                        <div class="description-common-accessory-user">
                                            <div><my-icon type="iconuser-account-bussiness"></my-icon><rx-user-info
                                                :userId="receiver.updateBy"/></div>
                                            <div><my-icon type="icontime"></my-icon>{{ subReceiver.createTime }}</div>
                                        </div>
                                    </div>
                                    <div class="description-common-download">
                                        <my-icon type="iconcloud-download"
                                                 @click="donwload(subReceiver)"></my-icon>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a-modal :zIndex="99999" :title="$ti18('rxMsa.actionTips','操作提示')" v-model:open="showWithdraw" @ok="btnWithdraw">
            <p >{{i18n('msa.withdrawTips','您确定要撤回当前沟通任务吗？')}}</p>
        </a-modal>
    </a-drawer>
</template>

<script>
import {Util,TokenUtil} from '@lowcode/jpaas-base-lib';
import {RxUserComponent, RxUserInfo} from "@lowcode/jpaas-share-component";
import FlowUtil from "../js/FlowUtil.js";
import BpmTaskCommuApi from '@/common/api/bpm/bpmTaskCommu'
import withdrawTips from "./withdrawTips.vue";
import { mapState } from 'pinia';
import userUser from "@/stores/userUser";
export default {
    name: "bpm-commu-history",
    mixins: [FlowUtil],
    emits:['update:bpmCommuShow'],
    props: {
        instId: {type: String},
        bpmTask: {type: Object, required: false},
        bpmTaskDetail: {type: Object, required: false},
        bpmCommuShow: {type: Boolean, default: false},
        layerid: String,
        destroy: {
            type: Function
        }
    },
    computed: {
      ...mapState(userUser, ['user']),
    },
    components: {
        RxUserComponent,
        RxUserInfo
    },
    data() {
        return {
            checkHistorys: [],
            extMapping: {
                ".doc": "wordBox",
                ".docx": "wordBox",
                ".xls": "excelBox",
                ".xlsx": "excelBox",
                ".txt": "txtBox",
                ".pdf": "pdfBox",
                ".rar": "rarBox",
                ".zip": "zipBox",
            },
            checkHistorysUnhand: [],
            showWithdraw:false,
            receiver:{}
        }
    },
    created() {
        this.getCommuData();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTask",key);
        },
        btnWithdraw(){
            this.showWithdraw=false;
            let self_=this;
            BpmTaskCommuApi.withdraw(self_.receiver).then(res => {
                self_.receiver={};
                self_.getCommuData();
            });
        },
        withdrawOne(commu,receiver){
            this.receiver={
                id:receiver.id,
                type:'one',
                cummuId:""
            };

            if(commu.receiverIds.indexOf(",")==-1){
                this.receiver.cummuId=commu.id;
            }
            this.showWithdraw=true;
        },
        withdrawAll(commu){
            let self_=this;
            let config={
                component: withdrawTips,
                curVm: this,
                widthHeight: ['600px', '400px'],
                zIndex: 99999,
                title: this.i18n("taskComm.withdrawCummu","撤回沟通"),
                data: {
                    commu:commu
                }
            };
            Util.open(config, function (action,data) {
                if (action != 'ok') {
                    return;
                }
                self_.withdrawAllFun(commu,data);
            });
        },
        withdrawAllFun(commu,data){
            let self_=this;
            let parameter = {
                id:commu.id,
                type:"all",
                receiverIds:data.receiverIds
            }
            if(!data.all){
                parameter.id="";
            }
            BpmTaskCommuApi.withdraw(parameter).then(res => {
                self_.getCommuData();
            });
        },
        canWithdraw(item) {
            if(!item.receivers || item.receivers.length==0){
                return false
            }
            let receiver = item.receivers.find(receiver=>{
                return receiver.readed != 1 ;
            })
            if(!receiver){
                return  false;
            }
            var curUser = this.user;

            if(item.createBy ==curUser.userId){
                return true;
            }
            return false;
        },
        canReplyFun(item) {
            var curUser=this.user;
            if(!this.bpmTask || !this.bpmTask.taskId){
                return false;
            }
            if(this.bpmTask.taskId!=item.replyTaskId){
                return false;
            }
            if(item.type=="p"){
                return false;
            }

            if(!item.valid){
                return false;
            }

            if(!item.receiverIds){
                return false;
            }

            if(item.receiverIds.indexOf(curUser.userId) ==-1){
                return false;
            }


            if(item.nodeId!=this.bpmTask.key){
                return false;
            }

            if(item.receivers.length==0){
                return true;
            }
            for(let i=0;i<item.receivers.length;i++){
                if(curUser.userId==item.receivers[i].receiverId){
                    return false;
                }
            }
            return true;
        },
        /**
         * 回复沟通
         * @param item
         */
        replyFun(item){
            this.$emit("doReplyCommu",item);
        },
        /**
         * 新增沟通
         * @param item
         */
        newReplyFun(item){},
        getReadedName(receiver){
            if(receiver.readed==0){
                return this.i18n('taskComm.unRead',"未阅");
            }
            return this.i18n('taskComm.read',"已阅");
        },
        getReceiverUserId(receiver) {
            if(receiver.readed==1){
                return receiver.updateBy;
            }
            return receiver.receiverId;
        },
        getReceiverName(item) {
            let returnName = "";
            let name = item.receiverNames;

            let names = name.split(",");

            for (let i = 0; i < names.length; i++) {
                if (i == 0) {
                    returnName = "@" + names[i];
                    continue
                }
                returnName = returnName + " @" + names[i];
            }
            return returnName;
        },
        rxClass(item) {
            //根据文件名  添加类名；
            var name = item.name;
            for (var key in this.extMapping) {
                if (name.indexOf(key) > -1) {
                    return this.extMapping[key];
                }
            }
            return "attachBox";
        },
        showAttachment(val) {
            if(!val){
                return false;
            }
            try {
                let fileList = JSON.parse(val);
                if (fileList.length > 0) {
                    return true;
                }
            } catch (e) {
                return false;
            }
            return true;
        },
        onCheckCommu() {
            this.$emit('update:bpmCommuShow', false)
        },
        getCommuData() {
            if (!this.instId) {
                return;
            }
            let parameter = {
                instId: this.instId,
                taskId: "",
                nodeId: ""
            }
            if(this.bpmTask){
                parameter.taskId=this.bpmTask.taskId;
                parameter.nodeId=this.bpmTask.key;
            }
            BpmTaskCommuApi.getAllCommus(parameter).then(res => {
                if (!res.success) {
                    return;
                }
                this.checkHistorys = res.data;
            });
        },
        donwload(file) {//下载附件
            var accessToken = TokenUtil.getToken();
            const url = '/api/api-system/system/core/sysFile/download/' + file.fileId + '?accessToken=' + accessToken;
            window.open(url);
        },

    },
    watch: {
        bpmCommuShow: function (val) {
            if (val) {
                this.getCommuData();
            }
        }
    }
}
</script>

<style scoped lang="less">
.rx-unread{
    line-height: 30px;
    background: rgb(255,236,232);
    color: rgb(245,75,74);
    padding: 3px 10px;
    border-radius: 5px;
    margin-left: 5px;
}
.rx-read{
    line-height: 30px;
    background: rgb(242,243,245);
    color: rgb(109,120,135);
    padding: 3px 10px;
    border-radius: 5px;
    margin-left: 5px;
}
.rx-withdraw{
    display: flex;
    border: 1px solid #1890ff;
    border-radius: 4px;
    padding: 0px 10px;
    height: 26px;
    align-items: center;
    color: #1890ff;
}
.rx-withdraw i{
    margin-right: 5px;
}
.communication{
    display: flex;
}
.description-head-user-createBy{
    display: flex;
}
.description-head-nodeName{
    margin-left: 10px;
}
.communication-le{
    color: #D8D8D8;
    margin-top: 30px;
    margin-right: 10px;
}
.description-head {
    display: flex;
    align-content: center;
    margin-bottom: 11px;
    margin-top: 17px;

    .description-head-portrait {
        width: 40px;
        height:40px;
        line-height: 40px;
        margin-right: 3px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .description-head-user {
        font-size: 12px;
        color: #46494d;
        margin-top: 2px;
        margin-left: 10px;
        flex: 1;
    }

    .description-head-jumpTypeName {
        flex: 1;
        text-align: center;
        font-size: 12px;
        margin-top: 2px;
    }
    .replyClass{
        margin-left: 10px;
        color: #4285F4;
        cursor: pointer;
    }
}
.bpm-description-common{
    background: #ECF4FF;
    width: 100%;
    padding: 10px;
    border-radius: 4px 4px 4px 4px;
    position: relative;
}
.bpm-description-communication{
    background: #F8F8F8;
    width: 100%;
    padding: 10px;
    border-radius: 4px 4px 4px 4px;
    position: relative;
}
.bpm-description-common-communication-triangle{
    display: block;
    position: absolute;
    top: -19px;
    left: 12px;
    width: 12px;
    height: 9px;
    border:10px solid;
    border-color:transparent  transparent #F8F8F8  transparent ;
}
.bpm-description-common-triangle{
    display: block;
    position: absolute;
    top: -19px;
    left: 12px;
    width: 12px;
    height: 9px;
    border:10px solid;
    border-color:transparent  transparent #ECF4FF  transparent ;
}
.bpm-description-common-reply{
    color: #303030;
    font-size: 14px;
    margin-left: 10px;
}
.description-common-accessory-con{
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
}
.description-common-accessory{
    background: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
}
</style>
